<template>
    <div class="demand-recommend">
        <a-modal width="1300px" :visible="visible" title="智能推荐" @cancel="closeModal" class="yuan-modal demand-recommend-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="page-main">

                    <AchPageListVue :listInfo="detailInfo" />

                    <a-card>
                        <a-tabs type="card" v-model="pageType" @change="tabChange">
                            <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
                        </a-tabs>
                        
                        <div class="table yuan-form">
                            <div class="form-title">推荐需求</div>
                            <a-carousel autoplay arrows draggable>
                                <div style="padding:15px" v-for="item in demandS">
                                    <PageListVue :listInfo="item"/>
                                </div>
                            </a-carousel>

                            <div class="form-title">推荐专家</div>
                            <div style="padding:15px;" >
                                <UserPageListVue :listInfo="item" v-for="(item,idx) in userS" :key="'user_'+idx"/>
                            </div>
                        </div>
                    </a-card>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="modalOk" type="primary">
                    关闭
                </a-button>
            </template>
        </a-modal>

        
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import PageListVue from "@/views/demand/components/demandPageList.vue";
import AchPageListVue from "@/views/demand/components/achPageList.vue";
import UserPageListVue from "@/views/demand/components/userPageList.vue";
import api from "@/api/api";
import config from "@/utils/config";
@Component({
    name: "tpl",
    components: { PageListVue, AchPageListVue, UserPageListVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) recId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.pageType = "4";
            this.pageInit();
        }
    }
    
    pageList = [];
    pageType = "4";
    typeArr = [
        { title: "智能匹配", val: "4" },
    ];
    pageData: any = { schidx: 2 };
    loading = false;
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
            this.$emit("sureClose");
        } finally {
            this.loading = false;
        }
    }

    tabChange(e: string) {
       
    }
    async pageInit() {
        this.loading = true;
        Promise.all([this.getRecommend(), this.getDetailInfo()]).then(() => {
            this.loading = false;
        });
    }
    demandS = [];
    userS = [];
    async getRecommend() {
        try {
            const res = await api.getAccRecommendList({ achievementId: this.recId });
            this.demandS = res.data.demandS || [];
            this.userS = res.data.userS || [];
        } finally {
            //this.loading = false;
        }
    }
    detailInfo: any = {};
    async getDetailInfo() {
        try {
            const res = await api.getAchList({ id: this.recId });
            this.detailInfo = res.data;
        } finally {
            //this.loading = false;
        }
    }
}
</script>
<style lang="scss">
.demand-recommend-modal {
    .page-main {
        background-color: #fff;
        padding: 10px;
        border-radius: 8px;
    }

    .proline-parent {
        padding: 5px 0;
        text-align: left;
        line-height: 16px;
    }
    .proline-box {
        display: flex;
        margin-top: 20px;
    }
    .line-box {
        margin-bottom: 5px;
        transform: translateX(5px);
        display: flex;
    }
    .proline-list {
        display: inline-block;
        width: 100px;
        flex-shrink: 0;
        color: #82848a;
    }
    .proline-line {
        height: 2px;
        background-color: #f9f9f9;
    }
    .proline-line:last-child {
        width: 10px;
        background-color: transparent;
    }
    .proline-line::before {
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 10px;
        background-color: #fff;
        vertical-align: top;
        position: relative;
        top: -4px;
    }
    .proline-timeout {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-timeout::before {
        background-color: #fe3d3d;
    }

    .proline-over {
        background-color: rgba(27, 196, 109, 1);
    }
    .proline-over::before {
        background-color: #1bc46d;
    }
    .proline-after {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-after::before {
        //background-color: #82848A;
        border: solid 1px #82848a;
    }
    .proline-on {
        background-color: rgba(130, 132, 138, 0.5);
    }
    .proline-on::before {
        background-color: #1bc46d;
    }

    .proline-words {
        padding: 0 2px;
    }
    .proline-words-over {
        color: #333;
    }
    .proline-words-on {
        color: #333;
    }
    .proline-words-after {
        opacity: 0.5;
    }
    .proline-words-timeout {
        color: #fe3d3d;
    }

    .page-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .page-list::after {
        content: "";
        width: calc(100% - 170px);
        border-bottom: solid 1px #eee;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .list-imgbox {
        width: 160px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .list-img {
        max-width: 100%;
        max-height: 100%;
    }
    .list-user-img {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        margin-right: 5px;
    }
    .list-mid {
        flex-grow: 1;
        padding: 10px 15px;
    }
    .list-title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
    }
    .list-content {
        font-size: 14px;
        color: #333;
        margin-top: 5px;
    }
    .list-userbox {
        margin-top: 5px;
        font-size: 16px;
        color: #333;
    }
    .list-right {
    }
    .list-btn {
        display: block;
        margin-bottom: 5px;
    }
    .slick-dots-bottom {
        bottom: 8px;
    }
    .ant-carousel .slick-dots li {
        border: solid 1px #ccc;
        background-color: #ddd;
    }
}
</style>
